<template>
   <section class="msite">
      <!-- 头部搜索-开始 -->
      <HeaderTop title="🥯早点外卖">
         <span class="header_search" slot="left" @click="$router.replace('/search')">
            <i class="iconfont icon-sousuo"></i>
         </span>
         <span class="header_login" slot="right">
            <span class="header_login_text" v-if="!userInfo.username" style="font-size: 16px;" @click="$router.replace('/login')">登录</span>
            <van-icon name="share-o" v-else @click="to_share"/>
         </span>
      </HeaderTop>
      <!-- 头部搜索-结束 -->
      
      <!-- 分类下拉菜单 -->
      <div class="drop-down-menu" >
         <van-dropdown-menu active-color="#02a774">
            <van-dropdown-item v-model="value1" :options="option1" />
            <van-dropdown-item v-model="value2" :options="option2" />
         </van-dropdown-menu>
      </div>

      <!-- 分享面板-开始 -->
      <van-popup v-model="share" round position="bottom" :style="{ height: '20%' }">
         <section class="share-box">
            <div class="share-qq" @click="shareApp('QQ')">
               <img src="@/assets/images/msite/share-qq.png" alt="">
               <p>QQ</p>
            </div>
            <div class="share-wechat" @click="shareApp('wechat')">
               <img src="@/assets/images/msite/share-wechat.png" alt="">
               <p>微信</p>
            </div>
            <div class="share-weibo" @click="shareApp('weibo')">
               <img src="@/assets/images/msite/share-weibo.png" alt="">
               <p>微博</p>
            </div>
            <div class="share-link" @click="shareLink">
               <img src="@/assets/images/msite/share-link.png" alt="">
               <p>复制链接</p>
            </div>
         </section>
      </van-popup>
      <!-- 分享面板-结束 -->

      <!-- 轮播图-开始 -->
      <Swiper :list="shoplist"/>
      <!-- 轮播图-结束 -->

      <!-- 商品列表-开始 -->
      <ShopList :shoplist="shoplist" :title="option1[value1].text"/>
      <!-- 商品列表-结束 -->
   </section>
</template>

<script>
import Swiper from "@/components/Swiper/Swiper"
import HeaderTop from "@/components/HeaderTop/HeaderTop"
import ShopList from "@/components/ShopList/ShopList"
//vuex
import { mapState } from "vuex"
//分享功能插件
import { shareWechat, shareQQ, shareWeibo } from '@/utils/share.js'
//vant
import { Toast } from 'vant'

export default {
   data() {
      return {
         share: false, // 是否显示分享模块
         value1: 0, // 下拉菜单默认选中项1
         value2: 'a', // 下拉菜单默认选中项2
         option1: [ // 下拉菜列表1
            { text: '附近商家', value: 0 },
            { text: '最新店铺', value: 1 },
            { text: '活动店铺', value: 2 },
         ],
         option2: [ // 下拉菜列表2
            { text: '默认排序', value: 'a' },
            { text: '好评排序', value: 'b' },
            { text: '销量排序', value: 'c' },
         ]
      };
   },
   mounted() {
      const box = document.querySelector('.drop-down-menu .van-dropdown-menu__bar ')
      box.style.height = '35px'
   },
   components: {
      Swiper,
      HeaderTop,
      ShopList
   },
   computed: {
      ...mapState('mstite', ['shoplist']),
      ...mapState('profile', ['userInfo']),
   },
   methods: {
      /* 去分享 */
      to_share() {
         this.share = true
      },
      /* 链接分享 */
      shareLink() {
         const link = location.href
         this.$copyText(link).then(() => {
            this.share = false // 关闭分享面板
            Toast.success('链接复制成功')
         }, () => {
            this.share = false // 关闭分享面板
            Toast.fail('链接复制失败')
         })
      },
      /* 分享功能 */
      shareApp(type) {},
   }
};
</script>

<style scoped lang="stylus">
@import '../../common/stylus/mixins.styl';

.msite {
   padding: 45px 0 50px;

   /* 分类下拉菜单 */
   .drop-down-menu {
      width: 100%;
      position relative;
      z-index: 90;
   }

   /* 搜索按钮 */
   .header_search {
      width: 10%;
      height: 50%;
      .icon-sousuo {
         font-size: 20px;
         color: #fff;
      }
   }

   /* 登录按钮 */
   .header_login {
      font-size: 20px;
      cursor: pointer;
   }

   /* 分享面板 */
   .share-box {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      div {
         text-align: center;
         img { width: 50px;}
         p {
            margin-top: 5px;
            font-size: 14px;
         }
      }
   }
}
</style>